<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑导航 -->
        <div slot="header" class="clearfix">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>大数据</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 目标名称、状态搜索框 -->

        <el-form :inline="true" class="demo-form-inline"  ref="searchForm" :rules="rules" :model="searchForm">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col>
              <el-form-item label="目录名称" prop="directoryNameTop">
                <el-input v-model="searchForm.directoryNameTop"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="state">
                <el-select placeholder="请选择" v-model="searchForm.state">
              <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
                   </el-select>
              </el-form-item>
              <!-- <el-form-item> -->
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              <!-- </el-form-item> -->
            </el-col>
            <el-col :span="8" style="">
              <el-form-item>
                <el-button
                icon="el-icon-back"
                v-show='isShow'
                type="text"
                margin-right='30px'
                  @click="$router.push('./list')"
                  >返回学科</el-button
                >
                 <el-button
                  style="background: #67c23a; color: #fff"
                  @click="openDialog('add')"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 警告栏 -->
        <el-alert type="info" class="alert" :closable="false" show-icon
          >数据一共{{counts}}条</el-alert
        >

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column
          >x
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" :formatter="formatter">
            <!-- <template  v-slot="{row}" >
             {{row.addDate | newTime}}
            </template> -->
            </el-table-column>
          <el-table-column prop="state" label="面试题数量"> </el-table-column>
          <el-table-column label="状态" prop="state">
            <template  slot-scope="scope" >              {{scope.row.state?'已启用':'已禁用'}}
            </template>
          </el-table-column>
          <el-table-column  label="操作" >
            <template #default="{ row }">
              <el-button type="text" @click="doAllow(row)"
                >
                <template #default v-if="row.state==1">禁用</template>
                <template #default v-else>启用</template>
                </el-button
              >
              <!-- disabled -->
              <el-button   type="text" @click="openDialog('edit', row.id)"
                :disabled="row.state===1"
                >修改</el-button
              >
              <!-- :disabled="isState === 0 ? true : false" -->
              <el-button :disabled="row.state===1"  type="text" @click="open(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- v-if="data.lenght>page-sizes"    @size-change="handleSizeChange" -->
        <div class="block">
          <el-pagination
           @size-change="handleSizeChange"
            :hide-on-single-page="value"
            background
            @current-change="handleCurrentChange"
            :current-page="page"
            :total="counts"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>

            <el-dialog :title="titleType" :visible.sync="isDialog" @close="closeDialog" width="25%">
          <el-form ref="form" :rules="rules" :model="form">
            <el-form-item label="所属学科" label-width="80px" prop="subjectID">
              <el-select v-model="form.subjectID" placeholder="请选择" style="width:100%" >
               <el-option v-for="item in subjectList" :label="item.label" :value="item.value" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" label-width="80px" prop="directoryName">
              <el-input v-model="form.directoryName" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入学科数据
import { simple } from '@/api/hmmm/subjects'
import { list, remove, add, update, changeState } from '@/api/hmmm/directorys'
export default {
  // 标题类型
  computed: {
    titleType () {
      let title = ''
      if (this.eventType === 'add') title = '新增目录'
      if (this.eventType === 'edit') title = '修改目录'
      return title
    }
  },
  data () {
    return {
      isShow: false,
      searchForm: {
        directoryNameTop: '',
        page: 1,
        pagesize: 10,
        state: ''
      },
      value: true,
      options: [{
        value: '1',
        label: '已启用'
      }, {
        value: '0',
        label: '已禁用'
      }],
      subjectList: [],
      page: 1,
      pages: 5,
      pagesize: 5,
      counts: 0,
      isDialog: false,
      eventType: '',
      tableData: [],
      form: {
        id: '',
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }

    }
  },
  created () {
    this.getsubjectList()
    this.getTagsList()
  },
  methods: {
    formatter (row, column, cellValue, index) {
      return cellValue.replace('T', ' ').substring(0, 19)
    },
    // 搜索
    async  search () {
      if (this.searchForm.state) {
        const { data } = await list({
          state: this.searchForm.state,
          directoryName: this.searchForm.directoryNameTop,
          page: +this.searchForm.page,
          pagesize: +this.searchForm.pagesize
        })
        console.log(data, '搜索')
        this.counts = +data.counts
        this.tableData = data.items
      } else {
        const { data } = await list({
          directoryName: this.searchForm.directoryNameTop,
          page: +this.searchForm.page,
          pagesize: +this.searchForm.pagesize
        })
        console.log(data, '搜索')
        this.counts = +data.counts
        this.tableData = data.items
      }

      this.resetForm()
    },
    resetForm () {
      console.log('清除')
      // this.$refs.form.resetFields()
      this.searchForm.directoryNameTop = ''
      this.searchForm.state = ''
    },
    async doAllow (row) {
      const state = row.state ? 0 : 1
      const res = await changeState({ state, id: row.id })
      console.log(res, '状态')
      this.getTagsList()
    },
    // 表单关闭
    closeDialog () {
      this.isDialog = false
      this.$refs.form.resetFields()
    },
    // 表单提交
    async  submit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        if (this.eventType === 'add') {
          console.log('123123')
          await add({ directoryName: this.form.directoryName, subjectID: this.form.subjectID })
          this.$message.success('添加成功')
        }
        if (this.eventType === 'edit') {
          await update({
            id: this.form.id,
            subjectID: this.form.subjectID,
            directoryName: this.form.directoryName
          })
          this.$message.success('修改成功')
        }
      })
      this.getTagsList()
      this.isDialog = false
      this.closeDialog()
    },
    // 选中条数渲染
    handleSizeChange (val) {
      this.pagesize = val
      this.getTagsList()
      console.log(this.pagesize, '111111')
    },
    // 跳转到相应页面
    handleCurrentChange (value) {
      this.page = value
      console.log(this.page)
      this.getTagsList()
    },
    // 下拉框选项数据获取
    async getsubjectList () {
      const { data } = await simple()
      console.log(data, '学科')
      this.subjectList = data
    },
    // 获取列表数据渲染
    async getTagsList () {
      if (this.$route.query.id) {
        this.isShow = true
        const { data } = await list({
          page: +this.page,
          pagesize: +this.pagesize,
          subjectID: this.$route.query.id
        })
        this.tableData = data.items
        this.page = +data.page
        this.pages = +data.pages
        this.pagesize = +data.pagesize
        this.counts = +data.counts
      } else {
        const { data } = await list({
          page: +this.page,
          pagesize: +this.pagesize
        })
        this.tableData = data.items
        this.page = +data.page
        this.pages = +data.pages
        this.pagesize = +data.pagesize
        this.counts = +data.counts
      }
    },
    // 删除功能
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const editDir = this.tableData.find(item => item.id === id)
        remove(editDir)
        const deleteAfterPage = Math.ceil((this.counts - 1) / this.pagesize)
        const page = this.page > deleteAfterPage ? deleteAfterPage : this.page
        this.page = page < 1 ? 1 : page
        this.getTagsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 列表回显
    async openDialog (type, id) {
      this.isDialog = true
      this.eventType = type
      if (this.eventType === 'edit') {
        const editDir = this.tableData.find(item => item.id === id)
        this.form.id = editDir.id
        this.form.subjectID = editDir.subjectID
        this.form.directoryName = editDir.directoryName
      }
    }
  }
}

</script>

<style scoped>
.block {
  margin-top: 20px;
  text-align: right;
}
</style>
